<template>
  <div class="header">
    <div class="title pl-24">授信申请</div>
    <div>
      <el-tabs v-model="key" @tab-click="handleClick">
        <el-tab-pane
          :label="`已申请银行（${sum.applyCount || '0'}）`"
          :name="0"
        ></el-tab-pane>
        <el-tab-pane
          :label="`申请中（${sum.underReviewCount || '0'}）`"
          :name="1"
        ></el-tab-pane>
        <el-tab-pane
          :label="`未申请银行（${sum.notApplyCount || '0'}）`"
          :name="2"
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <div class="credit" v-loading="bankLoading">
    <el-empty
      class="flex-x-center wh"
      v-if="list.length <= 0"
      description="暂无数据"
    />
    <c-bank-item
      class="mr-30 mt-24"
      v-for="(item, index) in list"
      :key="index"
      v-model="list[index]"
    />
  </div>
  <c-main-template
    v-loading="loading"
    class="mg-24"
    minHeight="auto"
    title="全部授信列表"
    :isBreadcrumb="false"
  >
    <c-table-template :data="tableData">
      <el-table-column align="center" type="index" label="序号" width="60" />
      <el-table-column width="250" align="left" prop="bank" label="授信银行" />
      <el-table-column min-width="200" align="center" label="授信额度(元)">
        <template #default="scope">
          {{ filters.thousands(scope.row.bankAmount) }}
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="剩余额度(元)">
        <template #default="scope">
          {{ filters.thousands(scope.row.currentAmount) }}
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="授信利率">
        <template #default="scope"> {{ scope.row.rate || "0" }} % </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="授信利率区间">
        <template #default="scope">
          {{ scope.row.creditRateMin || "0" }}%~{{
            scope.row.creditRateMax || "0"
          }}%
        </template>
      </el-table-column>
      <el-table-column width="220" align="center" label="授信有效期">
        <template #default="scope">
          <span v-if="scope.row.timeExpiry && scope.row.timeValid">
            {{ filters.dateYMDFormat(scope.row.timeValid) }} -
            {{ filters.dateYMDFormat(scope.row.timeExpiry) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column width="170" align="left" label="申请时间">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column width="150" align="center" label="状态">
        <template #default="scope">
          <span v-if="scope.row.status === null">未申请</span>
          <span v-else>{{ creditType[scope.row.status * 1].label }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" prop="address" label="操作" width="150">
        <template #default="scope">
          <el-button
            v-if="scope.row.status === 0"
            link
            type="primary"
            size="small"
            class="mr-sm"
            @click="handleReplenish(scope.row)"
            >补充资料</el-button
          >
          <el-button
            v-if="scope.row.status === 4"
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleLoanStatement(scope.row)">借款账单</el-button
          >

          <el-button
            v-if="scope.row.status !== null"
            @click="handleDetails(scope.row)"
            link
            type="primary"
            size="small"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="2"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import cBankItem from "./components/BankItem.vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { creditType } from "@/utils/status.js";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
const {
  querys,
  tableData,
  total,
  loading,
  handleReset,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerCreditAmountApply/applyList",
});
const list = ref([]);
const key = ref(0);
const sum = ref({});
const bankLoading = ref(false);

onMounted(() => {
  getBankList();
  proxy
    .$get({ url: "/sellerCreditAmountApply/creditBankCount" })
    .then((res) => {
      sum.value = res;
    });
});
const handleClick = (i) => {
  key.value = i.index * 1;
  getBankList();
};
const handleLoanStatement = (item)=>{
  router.push({
    path:'/Loan',
    query:{
      key:0,
      bankId:item.id
    }
  })
}
const handleReplenish = (item) => {
  router.push({
    path: "/Credit/Details",
    query: {
      creditId: item.id,
    },
  });
};
const handleDetails = (item) => {
  router.push({
    path: "/Credit/Details",
    query: {
      isView: true,
      creditId: item.id,
    },
  });
};
const getBankList = () => {
  bankLoading.value = true;
  proxy
    .$get({
      url: "/sellerCreditAmountApply/bankList",
      params: {
        status: key.value,
      },
    })
    .then((res) => {
      list.value = res;
      bankLoading.value = false;
    });
};
</script>
<style lang="less" scoped>
:deep(.el-tabs__header) {
  margin: 0 !important;
  box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
  .el-tabs__nav-wrap {
    padding-left: 24px !important;
  }
  .el-tabs__nav-wrap::after {
    position: static !important;
  }
  .el-tabs__item {
    color: #5e6163;
  }
  .el-tabs__item.is-active {
    color: var(--el-color-primary);
  }
}
.credit {
  padding-left: 34px;
  padding-bottom: 19px;
  background-color: #ffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.header {
  width: 100%;
  background: #ffffff;
  padding-top: 24px;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #26282a;
    margin-bottom: 16px;
  }
}
</style>